<template>
	<view class="login_bg">
		<dsl-navbar title="" bgTopImg="" isBack backBg="white"></dsl-navbar>
		<view class="rowsc ">
			<image src="" mode="" class="logo"></image>
		</view>
		<view class="rowsc margin-top-xl">
			<view class="margin-top-xl">
				<view class="input_bdoy bg-white align-center">
					<view class="align-center text-xl text-white">
						<view class="margin-left" style="width: 150rpx;">手机号：</view>
						<view>
							<input type="text" value="" placeholder="请输入手机号" placeholder-class="text-white text-xl"
								v-model="mobile" />
						</view>
					</view>
				</view>
				<view class="input_bdoy bg-white align-center margin-top">
					<view class="align-center text-xl text-white">
						<view class="margin-left" style="width: 150rpx;">密码：</view>
						<input type="text" value="" placeholder="请输入密码" placeholder-class="text-white text-xl"
							v-model="password" v-if="loginType ==2" />
						<view v-if="loginType ==1" class="align-center">
							<view>
								<input type="text" value="" placeholder="请输入验证码" maxlength="6"
									placeholder-class="text-white text-xl" />
							</view>
							<view @click="getCode" class="code_button">
								{{ count|| '获取验证码'}}
							</view>
						</view>
					</view>
				</view>
				<view class="rowsb padding">
					<view @click="loginType =1" v-if="loginType ==2">短信登录</view>
					<view @click="loginType =2" v-if="loginType ==1">密码登录</view>
					<view @click="register">
						<text>没有账号？</text>
						<text style="color: #EAA019;">去注册</text>
					</view>
				</view>
				<view class="submit_body animation-scale-up" @click="login">
					<view hover-class="animation-scale-up">
						立即登录
					</view>
				</view>
				<view class="text-center margin-tb" @click="$tools.push('forgetPassword')">忘记密码</view>
				<view class="text-center margin-tb" @click="$tools.showToast('其他方式登录')">其他方式登录</view>
				<view class="rowsa">
					<image src="/static/login/qq.png" mode="" class="login_w"></image>
					<image src="/static/login/wx.png" mode="" class="login_w"></image>
				</view>
				<view class="align-center rowsc margin-top">
					<image :src=" false? '/static/login/icon_weixuan.png' :'/static/login/icon_xuanzhong.png'"
						mode="widthFix" style="width: 30rpx;"></image>
					<view class="text-center">
						<text style="color: #EAA019;">《用户协议》</text>
						<text style="color: #EAA019;">《隐私协议》</text>
						阅读并同意
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		loginApi
	} from '@/common/path.js'
	export default {
		data() {
			return {
				count: 0,
				loginType: 2, //登录方式
				mobile: "13256661810", //手机号
				password: "123456", //密码
			}
		},
		methods: {
			//登录
			login() {
				if (this.mobile.length != 11) {
					this.$tools.showToast('请填写正确的手机号')
					return
				}
				if (this.password == '') {
					this.$tools.showToast('请填写密码')
					return
				}
				let data = {
					mobile: this.mobile,
					password: this.password
				}
				this.Http.POST(loginApi, data)
					.then((res) => {
						if (res.code == 0) {
							this.$tools.showToast2('登录成功')
							uni.setStorageSync('userInfo', res.data)
							setTimeout(r => {
								uni.reLaunch({
									url: '/pages/home/index'
								})
							}, 1000)
						}else{
							this.$tools.showToast(res.msg)
						}
					})
			},
			//注册
			register() {
				uni.navigateTo({
					url: 'register'
				})
			},

			//获取验证码
			getCode() {
				const TIME_COUNT = 60;
				if (!this.timer) {
					this.count = TIME_COUNT;
					this.show = false;
					this.timer = setInterval(() => {
						if (this.count > 0 && this.count <= TIME_COUNT) {
							this.count -= 1;
						} else {
							this.show = true;
							clearInterval(this.timer);
							this.timer = null;
						}
					}, 1000);
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	page {
		color: white;
	}

	.login_bg {
		background-image: url(https://img0.baidu.com/it/u=1921453740,1986042499&fm=26&fmt=auto);
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		top: 0;
		background-size: 100% 100%;

	}

	.logo {
		width: 162rpx;
		height: 162rpx;
		background: #EAA019;
		opacity: 1;
		border-radius: 9rpx;
		margin-top: 200rpx;
	}

	.input_bdoy {
		width: 630rpx;
		height: 100rpx;
		border-radius: 50rpx;
		position: relative;
		background: rgba(255, 255, 255, 0.3);
	}

	.code_button {
		width: 166rpx;
		height: 54rpx;
		border: 2rpx solid #EAA019;
		border-radius: 30rpx;
		line-height: 54rpx;
		font-size: 24rpx;
		text-align: center;
		color: #EAA019;
		position: absolute;
		right: 30rpx;
	}

	.submit_body {
		width: 630rpx;
		height: 94rpx;
		background: linear-gradient(180deg, #EAA019 0%, #BA4949 100%);
		opacity: 1;
		line-height: 94rpx;
		text-align: center;
		border-radius: 10rpx;
		margin-top: 30rpx;
		color: white;
	}

	.login_w {
		width: 80rpx;
		height: 80rpx;
		background-color: white;
		border-radius: 80rpx;
	}
	input{
		width: 300rpx;
	}
</style>
